function generateWatermark(text, fontSize, color) {
  const canvas = document.createElement('canvas'); // 创建canvas元素
  canvas.width = 300; // 设置canvas宽度
  canvas.height = 160; // 设置canvas高度
  const ctx = canvas.getContext('2d'); // 获取2D绘图上下文
  ctx.font = `${fontSize}px Arial`; // 设置字体大小和字体样式
  ctx.fillStyle = color; // 设置字体颜色
  ctx.translate(20, canvas.height - 20); // 平移坐标原点
  ctx.rotate(-Math.PI / 6); // 旋转角度
  const currentTime = moment().format("YYYY-MM-DD HH:mm:ss");
  const watermarkText = text ? `${text} ${currentTime}` : `Watermark ${currentTime}`;
  ctx.fillText(watermarkText, 0, 0); // 绘制文本
  return canvas.toDataURL('image/png'); // 将canvas内容转换为base64格式的图片
}
//应用水印到指定元素
// el:要添加水印的元素、color:字体颜色、text:水印文本、fontSize:字体大小
function applyWatermark(el, text, fontSize, color) {
  const watermarkUrl = generateWatermark(text, fontSize, color);
  const watermarkLayer = document.createElement('div');
  watermarkLayer.style.cssText = `  
      position: absolute;  
      top: 0; 
      left: 0;
      z-index:9999;
      width:100%;  
      height: 100%;  
      background-image: url(${watermarkUrl});  
      background-repeat: repeat;  
      pointer-events: none;  
  `;
  el.style.position = 'relative'; // 应用样式
  el.appendChild(watermarkLayer); // 将水印层添加到元素中
}

export default {
  bind(el, binding, vnode) {
      const defaultText = '默认水印'; // 默认水印文本
      const defaultFontSize = 16; // 默认字体大小
      const defaultColor = 'rgba(0, 0, 0, 0.15)'; // 默认字体颜色

      const text = binding.value && binding.value.text ? binding.value.text : null; // 获取用户传入的文本内容
      const fontSize = binding.value && binding.value.fontSize ? binding.value.fontSize : defaultFontSize; // 获取用户传入的字体大小
      const color = binding.value && binding.value.color ? binding.value.color : defaultColor; // 获取用户传入的字体颜色

      if (text) {
          applyWatermark(el, text, fontSize, color); // 用户传入参数时显示用户传入的参数
      } else {
          axios.get(API.POST_DEVICE_CONFIG)
              .then(res => {
                  if (res.data.code === '0') {
                      const userName = res.data.data[0].ii;
                      const watermarkText = userName ? `${userName}` : defaultText;
                      applyWatermark(el, watermarkText, defaultFontSize, defaultColor);
                  } else {
                      applyWatermark(el, defaultText, defaultFontSize, defaultColor); // 接口请求失败或没有返回数据时使用默认参数
                  }
              })
              .catch(error => {
                  console.error(error);
                  applyWatermark(el, defaultText, defaultFontSize, defaultColor); // 接口请求失败时使用默认参数
              });
      }
  },
  unbind(el) {
      el.removeChild(el.lastChild);
  }
}